<template>
<div class="list" ref="wrapper">
  <div>
<div class="area">
  <div class="title border-topbottom">当前城市</div>
  <div class="button-list">
    <div class="button-wrapper">
      <div class="button">{{this.$store.state.city}}</div>
    </div>
  </div>
</div>
<div class="area">
  <div class="title border-topbottom">热门城市</div>
  <div class="button-list">
    <div class="button-wrapper" :key="item.id" v-for="item in hot" @click="handleCityClick(item.name)">
      <div class="button">{{item.name}}</div>
    </div>
  </div>
</div>
<div class="area"
     v-for="(item,key) of cities"
     :key="key"
     :ref="key"
>
  <div class="title border-topbottom">{{key}}</div>
  <div class="item-list">
    <div class="item border-topbottom" v-for="innerItem of item" :key="innerItem.id" @click="handleCityClick(innerItem.name)">
      {{innerItem.name}}
    </div>
  </div>
</div>
  </div>
</div>
</template>
<script type="text/ecmascript-6">
  import Bscroll from 'better-scroll';
  import {mapMutations} from 'vuex'
export default{
  name:'CityList',
  mounted: function(){
    this.scroll = new Bscroll(this.$refs.wrapper)
  },
  methods:{
    handleCityClick:function(city){
      //派发一个叫changeCity的action
      //this.$store.dispatch('changeCity', city);
      //直接调用mutation
//      this.$store.commit('changeCity', city);
      //这样就不用写this.$store.commit了
      this.changeCity(city);
      //跳回首页
      this.$router.push('/');
    },
    //就是把$store定义的changeCity方法映射出来
    ...mapMutations(['changeCity'])
  },
  props:['cities','hot','letter'],
  watch:{
    letter:function(){
      if(this.letter){
        //betterscroll提供的接口
          var element = this.$refs[this.letter][0];
        this.scroll.scrollToElement(element)
      }
    }
  },

}
</script>
<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
.list
  overflow hidden
  position absolute;
  top:1.58rem;
  right:0;
  bottom:0;
  left:0;
  .title
    line-height 0.54rem;
    background: #eee;
    padding-left:0.2rem;
    color:#666;
    font-size 0.26rem;
  .border-topbottom
    &:before
     border-color:#ccc;
    &:after
     border-color:#ccc;
  .button-list
    padding: 0.1rem 0.6rem 0.1rem 0.1rem;
    overflow hidden
    .button-wrapper
      float:left;
      width: 33.33%;
      .button
        padding: 0.1rem 0;
        margin: 0.1rem;
        border-radius 0.06rem;
        border:0.02rem solid #ccc;
        text-align :center;
   .item-list
     .item
       line-height:0.76rem;
       color:#666;
       padding-left:0.2rem;
     .border-topbottom
        &:before
          border-color:#ccc;
        &:after
          border-color:#ccc;
</style>
